<template>
  <div :class="classNames(rootClassName,{'jlf-timeline--pending': pending}, className)" :style="customStyle">
    <div v-for="(item, index) in items" :key="index" :class="itemRootClassName(item)">
      <div class="jlf-timeline-item__tail"></div>
      <div :class="dotClass(item)">
        <div v-if="item.icon" :class="fileIconClass(item)"></div>
      </div>
      <div class="jlf-timeline-item__content">
        <div class="jlf-timeline-item__content-item">
          {{ item.title}}
        </div>
        <template v-if="item.content">
          <div 
            v-for="(sub, subIndex) in item.content"
            :key="subIndex"
            class="jlf-timeline-item__content-item jlf-timeline-item__content--sub"
          >
            {{ sub }}
          </div>
        </template>
        
      </div>
    </div>
  </div>
</template>
<script>
import classNames from 'classnames'
export default {
  name: 'MTimeline',
  props: {
    pending: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array,
      default: () => [],
      validator: (val) => val.every((item) => typeof item === 'object')
    },
    customStyle: {
      type: [Object, String],
      default: () => ''
    },
    className: {
      type: [Object, String],
      default: () => ''
    }
  },
  methods: {
    classNames,
    fileIconClass(item) {
      const { icon } = item
      const iconClass = classNames({
        'jlf-icon': true,
        [`jlf-icon-${icon}`]: true
      })
      return iconClass
    },
    itemRootClassName(item) {
      const itemRootClassName = ['jlf-timeline-item']
      if(item.color) itemRootClassName.push(`jlf-timeline-item--${item.color}`)
      return classNames(itemRootClassName)
    },
    dotClass(item) {
      const dotClss = []
      if (item.icon) {
        dotClss.push('jlf-timeline-item__icon')
      } else {
        dotClss.push('jlf-timeline-item__dot')
      }
      return dotClss
    }
  },
  computed: {
    rootClassName() {
      const { pending } = this
      const rootClassName = ['jlf-timeline']
      if(pending) rootClassName.push('jlf-timeline--pending')
      return rootClassName
    }
  }
  
}
</script>